<template>
  <div class="evaluate-wrap">
    <div class="evaluate-pic"></div>

    <div class="title-box">{{title}}</div>

    <div class="line-box"></div>

    <div class="problem-box">
      <div class="topic-con">{{problem1}}</div>
      <div class="name-box">
        <img src="./admin.png" class="pic1" onclick="return false"/>
        <span class="name">驻厂姓名：</span>
        <popup-picker :data="teacherList" v-model="admin" class="admin" placeholder="请选择驻厂"
                      @on-change="changeAdmin"></popup-picker>
        <img src="../../images/in.png" class="pic2" onclick="return false"/>
      </div>

      <div class="select-box">
        <div class="mui-radio grade-box">
          <input type="radio" name="scoreRadio" @click="selectScore(1)"><span
          :class="{'active':textAdmin == 1}">十分满意</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="scoreRadio" @click="selectScore(2)"><span
          :class="{'active':textAdmin == 2}">满意</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="scoreRadio" @click="selectScore(3)"><span
          :class="{'active':textAdmin == 3}">一般</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="scoreRadio" @click="selectScore(4)"><span
          :class="{'active':textAdmin == 4}">不满意</span>
        </div>
      </div>

      <div class="reason-box" v-if="showAdminReason">
        <textarea class="reason" v-model="adminReason" placeholder="非常抱歉给您带来不好的感受，请告诉我们原因，我们会做的更好~" maxlength="150"
                  @blur="inputBlur"></textarea>
      </div>

    </div>

    <div class="problem-box">
      <div class="topic-con">{{problem2}}</div>
      <div class="name-box">
        <img src="./service.png" class="pic1" onclick="return false"/>
        <span class="name">客服工号：</span>
        <popup-picker :data="customerList" v-model="server" class="admin" placeholder="请选择客服"
                      @on-change="changeServer"></popup-picker>
        <img src="../../images/in.png" class="pic2" onclick="return false"/>
      </div>

      <div class="select-box">
        <div class="mui-radio grade-box">
          <input type="radio" name="gradeRadio" @click="selectGrade(1)"><span
          :class="{'active':textServer == 1}">十分满意</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="gradeRadio" @click="selectGrade(2)"><span
          :class="{'active':textServer == 2}">满意</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="gradeRadio" @click="selectGrade(3)"><span
          :class="{'active':textServer == 3}">一般</span>
        </div>
        <div class="mui-radio grade-box">
          <input type="radio" name="gradeRadio" @click="selectGrade(4)"><span
          :class="{'active':textServer == 4}">不满意</span>
        </div>
      </div>

      <div class="reason-box" v-if="showServerReason">
        <textarea class="reason" v-model="serverReason" placeholder="非常抱歉给您带来不好的感受，请告诉我们原因，我们会做的更好~" maxlength="150"
                  @blur="inputBlur"></textarea>
      </div>

    </div>


    <div class="problem-box">
      <div class="topic-con topic">{{problem3}}</div>
      <div class="reason-box">
        <textarea class="reason" v-model="pursueReason" placeholder="您的需要就是蓝聘的追求~" maxlength="150"
                  @blur="inputBlur"></textarea>
      </div>

    </div>

    <div class="problem-box">
      <div class="topic-con topic">{{problem4}}</div>
      <div class="reason-box">
        <textarea class="reason" v-model="otherReason" placeholder="您的需要就是蓝聘的追求~" maxlength="150"
                  @blur="inputBlur"></textarea>
      </div>

    </div>

    <div class="btn-box">
      <button class="btn" :class="{'btn-active':showBtnType == 1}" type="button"
              @click="saveEvaluate">提交
      </button>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {PopupPicker} from 'vux'
  import {getUrlKey, getDevice} from "../../common/js/util"

  const mapAdmin = new Map();
  const mapServer = new Map();

  export default {
    data() {
      return {
        admin: [],
        adminList: [],
        teacherList: [],
        adminReason: "",
        serverReason: "",
        pursueReason: "",
        otherReason: "",
        evaluateId: "",
        userSign: "",
        title: "",
        server: [],
        serverList: [],
        customerList: [],
        showAdminReason: false,
        showServerReason: false,
        adminEvaluate: "",
        serverEvaluate: "",
        adminId: "",
        serverId: "",
        showBtnType: 1,
        textAdmin: 0,
        textServer: 0,
        problem1: "1.在本次入职过程中，请您对驻厂老师的服务态度进行评价：",
        problem2: "2.在使用蓝聘过程中，请您对蓝聘客服的服务态度进行评价：",
        problem3: "3.入职工作后，您还有什么困难需要蓝聘平台帮您解决么？",
        problem4: "4.您对蓝聘还有什么其他意见或建议么？",
        workRemarkList: [],
        id: getUrlKey("id"),
        deviceType: ""
      }
    },
    mounted() {
      this.evaluateId = this.$route.query.evaluateId;
      this.deviceType = this.$route.query.deviceType;

      if (this.id) {
        this.userSign = this.id;
      } else {
        let base64 = require('js-base64').Base64;
        this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      }
      this.queryEvaluateList();
    },
    methods: {
      queryEvaluateList() {//获取入职评论列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work/get_work_order_remark_list?sgin=" + this.userSign + "&type=1" + "&workOrderId=" + this.evaluateId).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.title = resultObj.data.title;
            if (resultObj.data.teacherList != null && resultObj.data.teacherList.length > 0) {
              for (let i = 0, length = resultObj.data.teacherList.length; i < length; i++) {//驻厂
                this.adminList.push(resultObj.data.teacherList[i].userName);
                mapAdmin.set(resultObj.data.teacherList[i].userId, resultObj.data.teacherList[i].userName);
              }
              this.teacherList.push(this.adminList);

              for (let i = 0, length = resultObj.data.customerList.length; i < length; i++) {//客服
                this.serverList.push(resultObj.data.customerList[i].userName);
                mapServer.set(resultObj.data.customerList[i].userId, resultObj.data.customerList[i].userName);
              }
              this.customerList.push(this.serverList);
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      saveEvaluate() {//提交
        this.$vux.loading.show({
          text: '加载中',
        });

        let question1 = {};
        question1.workOrderId = this.evaluateId;
        question1.problemName = this.problem1;
        if (this.adminEvaluate && String(this.admin)) {
          question1.problemAnswer = this.adminEvaluate;
          question1.teacherId = this.adminId;
          question1.teacherName = String(this.admin);
        } else {
          question1.problemAnswer = '';
          question1.teacherId = '';
          question1.teacherName = '';
        }
        question1.remark = this.adminReason;

        let question2 = {};
        question2.workOrderId = this.evaluateId;
        question2.problemName = this.problem2;
        if (this.serverEvaluate && String(this.server)) {
          question2.problemAnswer = this.serverEvaluate;
          question2.teacherId = this.serverId;
          question2.teacherName = String(this.server);
        } else {
          question2.problemAnswer = '';
          question2.teacherId = '';
          question2.teacherName = '';
        }
        question2.remark = this.serverReason;

        let question3 = {};
        question3.workOrderId = this.evaluateId;
        question3.problemName = this.problem3;
        question3.problemAnswer = this.pursueReason;

        let question4 = {};
        question4.workOrderId = this.evaluateId;
        question4.problemName = this.problem4;
        question4.problemAnswer = this.otherReason;

        this.workRemarkList.push(question1);
        this.workRemarkList.push(question2);
        this.workRemarkList.push(question3);
        this.workRemarkList.push(question4);

        this.axios.post(baseUrl + "/work/insert_work_remark?sgin=" + this.userSign, this.workRemarkList).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 1) {
              if (this.deviceType != 1) {
                if (getDevice() == "ios") {
                  window.webkit.messageHandlers.submitSuccess.postMessage({
                    "body": "3"
                  });
                } else if (getDevice() == "android") {
                  window.android.submitSuccess(3); //调用安卓
                }
              }
              this.$router.push({
                path: "/entryevaluateedit",
                query: {"evaluateId": this.evaluateId, "id": this.userSign, "deviceType": this.deviceType}
              });
            } else {
              this.workRemarkList = [];
              this.$vux.toast.text("提交入职评价失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      changeAdmin(name) {//切换驻厂
        mapAdmin.forEach((value, key, map) => {
          if (name == value) {
            this.adminId = key;
          }
        });
        if (String(this.admin) && this.adminEvaluate) {
          this.showBtnType = 2;
        }
      },
      changeServer(name) {
        mapServer.forEach((value, key, map) => {
          if (name == value) {
            this.serverId = key;
          }
        });
        if (String(this.server) && this.serverEvaluate) {
          this.showBtnType = 2;
        }
      },
      selectScore(type) {//评分
        this.textAdmin = type;
        if (type == 4) {
          this.showAdminReason = true;
        } else {
          this.showAdminReason = false;
        }
        this.adminEvaluate = this.changeEvaluate(type);
        if (String(this.admin) && this.adminEvaluate) {
          this.showBtnType = 2;
        }
      },
      selectGrade(type) {
        this.textServer = type;
        if (type == 4) {
          this.showServerReason = true;
        } else {
          this.showServerReason = false;
        }
        this.serverEvaluate = this.changeEvaluate(type);
        if (String(this.server) && this.serverEvaluate) {
          this.showBtnType = 2;
        }
      },
      changeEvaluate(type) {
        if (type == 1) {
          return "十分满意";
        } else if (type == 2) {
          return "满意";
        } else if (type == 3) {
          return "一般";
        } else {
          return "不满意";
        }
      }
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  @import "../../../static/css/mui.min.css"

  .evaluate-wrap
    wh(100%, auto)
    .evaluate-pic
      wh(100%, 3.2rem)
      bg-image("./bg.png", 100%, 100%)
    .title-box
      display: flex
      align-items: center
      margin: 0 auto
      wh(9.36rem, 2.133rem)
      size-color(0.427rem, rgba(60, 175, 255, 1))
      line-height: 0.533rem
    .line-box
      wh(100%, 0.267rem)
      background: rgba(242, 242, 242, 1)
    .problem-box
      wh(100%, auto)
      .topic-con
        display: flex
        align-items: center
        margin-left: 3.2%
        wh(96.8%, 1.707rem)
        background: rgba(255, 255, 255, 1)
        size-color(0.427rem, rgba(51, 51, 51, 1))
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        line-height: 0.533rem
      .topic
        border-bottom: none
      .name-box
        display: flex
        align-items: center
        wh(100%, 1.28rem)
        .pic1
          margin-left 3.2%
          margin-right 0.213rem
          wh(0.48rem, 0.48rem)
        .name
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .admin
          flex: 1
          padding-right: 0.2rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .admin >>> .vux-cell-primary .vux-popup-picker-select
          text-align: right !important
        .admin >>> .vux-cell-primary .vux-popup-picker-placeholder
          color: #cccccc
        .pic2
          margin-right: 0.32rem
          wh(0.32rem, 0.32rem)
      .select-box
        display: flex
        align-items: center
        margin: 0 auto
        wh(9.36rem, 1.28rem)
        .grade-box
          display: flex
          align-items: center
          margin-right: 0.65rem
          &:last-child
            margin-right: 0
          span
            padding-left: 0.15rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
          .active
            color: #3cafff
      .reason-box
        margin: 0.133rem auto 0.267rem
        wh(9.36rem, 2.667rem)
        border-radius(0.053rem)
        .reason
          wh(9.36rem, 2.667rem)
          padding-left: 0.28rem
          padding-top: 0.28rem
          line-height: 0.48rem
          size-color(0.373rem, rgba(51, 51, 51, 1))
          resize: none

    .btn-box
      fj(center, center)
      margin-top: 0.8rem
      padding-bottom: 0.8rem
      .btn
        wh(92.53%, 1.333rem)
        background: rgba(60, 175, 255, 1)
        border-radius(0.107rem)
        size-color(0.48rem, rgba(255, 255, 255, 1))
      .btn-active
        background: #cccccc
        pointer-events: none
</style>

